<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>销售驾驶舱</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.14.1/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.16.9/dist/xlsx.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.js"></script>
<style>
  .el-form-item {
    margin-bottom: 0px;
  }

  .el-input--small .el-input__inner {
    height: 28px;
    line-height: 32px;
    width: 200px;
  }
</style>

<body>
  <div id="app">
    <el-row v-show="showQuery">
      <el-col :span="6">
        <el-form label-position="left" label-width="80px" >
          <el-form-item label="名称">
            <el-input ></el-input>
          </el-form-item>
          <el-form-item label="活动区域">
            <el-input ></el-input>
          </el-form-item>
          <el-form-item label="活动形式">
            <el-input ></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="5" style="margin-left:5px">
        <el-form label-position="left">
          <el-form-item label="项目总">
            <el-select placeholder="项目总">
              <el-option label="项目总一" value="shanghai"></el-option>
              <el-option label="项目总二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="性质">
            <el-select size="small" placeholder="性质">
              <el-option label="性质一" value="shanghai"></el-option>
              <el-option label="性质二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="项目">
            <el-select size="small" placeholder="项目">
              <el-option label="项目一" value="shanghai"></el-option>
              <el-option label="项目二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年份">
            <el-select size="small" placeholder="年份">
              <el-option label="2019" value="shanghai"></el-option>
              <el-option label="2020" value="beijing"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="5">
        <el-form label-position="left">
          <el-form-item label="季度">
            <el-select size="small" placeholder="季度">
              <el-option label="第一季度" value="shanghai"></el-option>
              <el-option label="第二季度" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="月份">
            <el-select size="small" placeholder="月份">
              <el-option label="1月" value="shanghai"></el-option>
              <el-option label="2月" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年保底预算完成率(%)">
            <el-input-number size="small" v-model="num" controls-position="right" :min="1" :max="100"></el-input-number>
          </el-form-item>
          <el-form-item label="同期预算完成率(%)">
            <el-input-number size="small" v-model="num" controls-position="right" :min="1" :max="100"></el-input-number>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="5">
        <el-form label-position="left">
          <el-form-item label="按年保底预算完成率排序">
            <el-select size="small" placeholder="排序类型" size="small" style="width: 100px;">
              <el-option label="升序" value="shanghai"></el-option>
              <el-option label="降序" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="按同期预算完成率排序">
            <el-select size="small" placeholder="排序类型" size="small" style="width: 100px;">
              <el-option label="升序" value="shanghai"></el-option>
              <el-option label="降序" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" icon="el-icon-search" type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-divider>
      <el-link type="primary" :icon="queryIcon" @click="changeQueryShow()">{{queryText}}</el-link>
    </el-divider>
    <el-row>
      <el-col :span="12">
        <div style="text-align: left;">
          <el-popover placement="right" width="200px" trigger="click">
            <div>
              <el-checkbox v-model="t_header.h_qy.show">{{t_header.h_qy.name}}</el-checkbox>
            </div>
            <div>
              <el-checkbox v-model="t_header.h_pq.show">{{t_header.h_pq.name}}</el-checkbox>
            </div>
            <div>
              <el-checkbox v-model="t_header.h_pqzj.show">{{t_header.h_pqzj.name}}</el-checkbox>
            </div>
            <div>
              <el-checkbox v-model="t_header.h_xmz.show">{{t_header.h_xmz.name}}</el-checkbox>
            </div>
            <div>
              <el-checkbox v-model="t_header.h_xz.show">{{t_header.h_xz.name}}</el-checkbox>
            </div>
            <div>
              <el-checkbox v-model="t_header.h_xm.show">{{t_header.h_xm.name}}</el-checkbox>
            </div>
            <el-button slot="reference" type="primary" size="small">选择字段</el-button>
          </el-popover>
          <el-button type="primary" size="small" style="margin-left: 20px;" @click="exportExcel()">导出Excel</el-button>
        </div>
      </el-col>
      <el-col :span="12">
        <el-pagination style="text-align: right;" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
          layout="total, sizes, prev, pager, next, jumper" :total="400">
        </el-pagination>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <template>
          <el-table id="out-table" :data="tableData" style="width: 100%" :header-cell-style="{'text-align':'center'}">
            <el-table-column prop="qy" v-if="t_header.h_qy.show" :label="t_header.h_qy.name" width="150">
            </el-table-column>
            <el-table-column prop="pq" v-if="t_header.h_pq.show" :label="t_header.h_pq.name" width="150">
            </el-table-column>
            <el-table-column prop="pqzj" v-if="t_header.h_pqzj.show" :label="t_header.h_pqzj.name" width="150">
            </el-table-column>
            <el-table-column prop="xmz" v-if="t_header.h_xmz.show" :label="t_header.h_xmz.name" width="150">
            </el-table-column>
            <el-table-column prop="xz" v-if="t_header.h_xz.show" :label="t_header.h_xz.name" width="150">
            </el-table-column>
            <el-table-column prop="xm" v-if="t_header.h_xm.show" :label="t_header.h_xm.name" width="150">
            </el-table-column>
            <el-table-column label="月度完成情况">
              <el-table-column prop="name" label="保底预算面积（平米）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="保底预算金额（万元）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="挑战预算面积（平米）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="挑战预算金额（万元）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="招商确认业绩认客户数" width="120">
              </el-table-column>
              <el-table-column prop="name" label="招商确认业绩面积" width="120">
              </el-table-column>
              <el-table-column prop="name" label="招商确认业绩金额" width="120">
              </el-table-column>
              <el-table-column prop="name" label="ERP已确认业绩客户数" width="120">
              </el-table-column>
              <el-table-column prop="name" label="ERP已确认业绩面积（平米）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="ERP已确认业绩金额（万元）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="特殊确认业绩客户数" width="120">
              </el-table-column>
              <el-table-column prop="name" label="特殊确认业绩面积（平米）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="特殊确认业绩金额（万元）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="未摘牌签约客户数（A类业绩）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="未摘牌签约面积（A类业绩）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="未摘牌签约金额（A类业绩）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="特殊事项（面积）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="特殊事项（金额）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="特殊事项（面积）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="A级客户面积" width="120">
              </el-table-column>
              <el-table-column prop="name" label="A级客户金额" width="120">
              </el-table-column>
              <el-table-column prop="name" label="保底预算完成率" width="120">
              </el-table-column>
              <el-table-column prop="name" label="挑战预算完成率" width="120">
              </el-table-column>
              <el-table-column prop="name" label="A类客户覆盖率" width="120">
              </el-table-column>
              <el-table-column prop="name" label="激进拟签约" width="120">
              </el-table-column>
              <el-table-column prop="name" label="激进拟签约覆盖率" width="120">
              </el-table-column>
            </el-table-column>
            <el-table-column label="同期">
              <el-table-column prop="name" label="预算面积" width="120">
              </el-table-column>
              <el-table-column prop="name" label="预算金额" width="120">
              </el-table-column>
              <el-table-column prop="name" label="签约面积" width="120">
              </el-table-column>
              <el-table-column prop="name" label="签约金额" width="120">
              </el-table-column>
              <el-table-column prop="name" label="保底预算完成率" width="120">
              </el-table-column>
            </el-table-column>
            <el-table-column label="季度完成情况">
              <el-table-column prop="name" label="预算面积" width="120">
              </el-table-column>
              <el-table-column prop="name" label="预算金额" width="120">
              </el-table-column>
              <el-table-column prop="name" label="签约面积" width="120">
              </el-table-column>
              <el-table-column prop="name" label="签约金额" width="120">
              </el-table-column>
              <el-table-column prop="name" label="未摘牌签约面积（A类业绩）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="未摘牌签约金额（A类业绩）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="业绩合计" width="120">
              </el-table-column>
              <el-table-column prop="name" label="保底预算完成率" width="120">
              </el-table-column>
            </el-table-column>
            <el-table-column label="全年完成情况">
              <el-table-column prop="name" label="预算面积" width="120">
              </el-table-column>
              <el-table-column prop="name" label="预算金额" width="120">
              </el-table-column>
              <el-table-column prop="name" label="签约面积" width="120">
              </el-table-column>
              <el-table-column prop="name" label="签约金额" width="120">
              </el-table-column>
              <el-table-column prop="name" label="未摘牌签约面积（A类业绩）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="未摘牌签约金额（A类业绩）" width="120">
              </el-table-column>
              <el-table-column prop="name" label="业绩合计" width="120">
              </el-table-column>
              <el-table-column prop="name" label="保底预算完成率" width="120">
              </el-table-column>
              <el-table-column prop="name" label="B级信息合同额" width="120">
              </el-table-column>
              <el-table-column prop="name" label="B类信息覆盖率" width="120">
              </el-table-column>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
  </div>
  <script>
    Vue.prototype.$moment = moment;
    Vue.prototype.$axios = axios;
    new Vue({
      el: '#app',
      data() {
        return {
          showQuery: false,
          queryText: '展开',
          queryIcon: 'el-icon-arrow-down',
          queryData: {
            opt_qy: [{
              value: '选项1',
              label: '黄金糕'
            }, {
              value: '选项6',
              label: '黄金叶'
            }, {
              value: '选项2',
              label: '双皮奶'
            }, {
              value: '选项3',
              label: '蚵仔煎'
            }, {
              value: '选项4',
              label: '龙须面'
            }, {
              value: '选项5',
              label: '北京烤鸭'
            }],
            qy_val: []
          },
          t_header: {
            h_qy: {
              name: '区域',
              show: true
            },
            h_pq: {
              name: '片区',
              show: true
            },
            h_pqzj: {
              name: '片区总监',
              show: true
            },
            h_xmz: {
              name: '项目总',
              show: true
            },
            h_xz: {
              name: '性质',
              show: true
            },
            h_xm: {
              name: '项目',
              show: true
            }

          },
          tableData: [{
            qy: '区域一',
            pq: '片区一',
            pqzj: '总监一',
            xmz: '项目总一',
            xz: '性质一',
            xm: '项目一',
            name: '测试',
            province: '上海',
            city: '普陀区',
            address: '上海市普陀区金沙江路 1518 弄',
            zip: 200333
          }],
          gridData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }],
          num: 1,
          currentPage4: 1,
          checked: true
        }
      },
      methods: {
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`);
        },
        changeQueryShow() {
          this.showQuery = !this.showQuery;
          if (this.showQuery) {
            this.queryText = '收起'
            this.queryIcon = 'el-icon-arrow-up'
          } else {
            this.queryText = '展开'
            this.queryIcon = 'el-icon-arrow-down'
          }
        },
        /**
       * 通用的打开下载对话框方法，没有测试过具体兼容性
       * @param url 下载地址，也可以是一个blob对象，必选
       * @param saveName 保存文件名，可选
       */
        openDownloadDialog(url, saveName) {
          if (typeof url == 'object' && url instanceof Blob) {
            url = URL.createObjectURL(url); // 创建blob地址
          }
          var aLink = document.createElement('a');
          aLink.href = url;
          aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
          var event;
          if (window.MouseEvent) event = new MouseEvent('click');
          else {
            event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
          }
          aLink.dispatchEvent(event);
        },
        // 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
        sheet2blob(sheet, sheetName) {
          sheetName = sheetName || 'sheet1';
          var workbook = {
            SheetNames: [sheetName],
            Sheets: {}
          };
          workbook.Sheets[sheetName] = sheet;
          // 生成excel的配置项
          var wopts = {
            bookType: 'xlsx', // 要生成的文件类型
            bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
            type: 'binary'
          };
          var wbout = XLSX.write(workbook, wopts);
          var blob = new Blob([s2ab(wbout)], { type: "application/octet-stream" });
          // 字符串转ArrayBuffer
          function s2ab(s) {
            var buf = new ArrayBuffer(s.length);
            var view = new Uint8Array(buf);
            for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
            return buf;
          }
          return blob;
        },
        exportExcel() {
           
          var table1 = document.querySelector("#out-table");
          var sheet = XLSX2.utils.table_to_sheet(table1,{ raw: false });

          // var sheet = XLSX.utils.table_to_sheet(document.querySelector("#out-table"), { raw: true });
          this.openDownloadDialog(this.sheet2blob(sheet), '报表.xlsx');
        }
      }
    })


                dateOpt: {
                      shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                          picker.$emit('pick', new Date());
                        }
                      }, {
                        text: '昨天',
                        onClick(picker) {
                          const date = new Date();
                          date.setTime(date.getTime() - 3600 * 1000 * 24);
                          picker.$emit('pick', date);
                        }
                      }, {
                        text: '一周前',
                        onClick(picker) {
                          const date = new Date();
                          date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                          picker.$emit('pick', date);
                        }
                      }]
                    },
  </script>
</body>

</html>